<template>
  <div class="about" @mousemove="getMouse">
    <h1>This is an about page</h1>
    <p>{{x}}--{{y}}</p>
    <hr/>
    <img :src="dogUrl">
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
    name:"AboutView",
})
</script>

<script lang="ts" setup>
import {ref,onMounted} from "vue";
import axiso from "axios"
let x = ref(-1);
let y = ref(-1);
const getMouse = (e:MouseEvent)=>{
    x.value = e.clientX;
    y.value = e.clientY
}

let dogUrl = ref("")
let getDogUrl = async ()=>{
    const result = await axiso.get("https://dog.ceo/api/breeds/image/random")
    dogUrl.value = result.data.message
}
onMounted(()=>{
    getDogUrl()
})

</script>

<style lang="scss" scoped>
.about{
  height: 600px;
  width: 100%;
  border: 1px solid #2c3e50;
}
</style>